<template>
  <a-modal
    :width="700"
    v-model:visible="openModal"
    title="日志信息"
    :footer="null"
    @ok="handleModalOK"
    @cancel="handleModalCancel"
  >
    <a-descriptions :column="1" style="padding: 20px">
      <a-descriptions-item label="模块"> {{ data.title }} </a-descriptions-item>
      <a-descriptions-item label="请求地址"> {{ data.url }}</a-descriptions-item>
      <a-descriptions-item label="用户信息">
        {{ data.creator }}/ {{ data.ip }}</a-descriptions-item
      >
      <a-descriptions-item label="请求方式"> {{ data.requestmethod }} </a-descriptions-item>
      <a-descriptions-item label="请求时间">
        {{ formatToDateTime(data.createTime) }}
      </a-descriptions-item>
      <a-descriptions-item label="请求参数" :span="2">
        {{ data.requestparams }}</a-descriptions-item
      >

      <a-descriptions-item label="响应结果"> {{ data.result }} </a-descriptions-item>
      <a-descriptions-item label="耗时"> {{ data.duration }} ms </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script lang="ts">
export default {
  name: 'BLogModal',
};
</script>
<script setup lang="ts">
import { ref, computed, onMounted, watch, unref } from 'vue';
import { deepMerge } from '/@/utils/index';
import { formatToDateTime } from '/@/utils/dateUtil';

const props = defineProps({
  openModal: Boolean,
  modalData: Object,
});
const emit = defineEmits(['handleModalOK', 'handleModalCancel']);

const data = ref([]);

watch(
  () => props.modalData,
  () => {
    deepMerge(data.value, props.modalData);
  },
);

const fetchData = async () => {};

onMounted(() => {
  fetchData();
});
const handleModalCancel = () => {
  emit('handleModalCancel');
};
const handleModalOK = async () => {
  try {
    emit('handleModalOK', true);
  } finally {
  }
};
</script>